$(function () {

    // 获取注册协议按钮
    let a = 5;
    let timer = setInterval(function () {
        $('.protocol button').text(`请仔细阅读${a}s`);
        a--;
        if (a == 0) {
            $('.protocol button').text(`同意协议`).prop('disabled', false).css('cursor', 'pointer');
            clearInterval(timer);
        }
    }, 1000);

    // 注册同意协议点击事件
    $('.protocol button').on('click', function () {
        $(this).closest('.smallBox').animate({
            left: -700
        }, 500);
        // 小黄线
        $('.yellowline').animate({
            left: 392
        }, 500);
        $('.box ul li span').removeClass().eq(1).addClass('sildelispan')
    })

    // 给左箭头绑定事件
    $('.zuojiantou').on('click', function () {
        $(this).parent('div').position().left
        $(this).closest('.smallBox').animate({
            left: $(this).parent('div').position().left - 700
        }, 500)
        $('.yellowline').animate({
            left: 176
        }, 500);
        $('.box ul li span').removeClass().eq(0).addClass('sildelispan')
    })


    // 表单验证开始
    let compellation = false //真实姓名标杆
    let chname = false; //用户名标杆
    let email = false; //邮箱标杆
    let chphone = false; //电话号码标杆
    let chmm = false; //密码标杆
    let chmm1 = false; //再次验证密码标杆
    let chphoneyzm = false; //手机验证码


    // 生成随机验证码
    $('#btn').click(function () {
        let yzm = null; //随机验证码
        for (let i = 0; i < 2; i++) {
            let a = Math.floor(Math.random() * 10);
            let letter = Math.floor(Math.random() * 26);
            let b = String.fromCharCode(65 + letter);
            yzm = yzm + a + b;
        };
        // 获取随机颜色
        function randomColor() {
            let colorArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']
            let color = "#";
            for (var i = 0; i < 6; i++) {
                color += colorArray[Math.floor(Math.random() * 16)];
            }
            return color;
        };
        // 直接拼接四个 i标签
        let fouri = '<i>' + yzm[0] + '</i>' + '<i>' + yzm[1] + '</i>' + '<i>' + yzm[2] + '</i>' + '<i>' + yzm[3] + '</i>';
        // 清除按钮的文字内容
        $('#btn').text('');
        $('#btn').html(fouri)
        // 把这四个i添加到按钮中
        // $(fouri).appendTo('#yzm');
        for (let i = 0; i < 4; i++) {
            $('#btn i').eq(i).css('color', randomColor());
            $('#btn i').eq(i).css('transform', "rotate(" + Math.ceil(Math.random() * 60) + "deg)");
        }

    }) //随机码结束

    // 开始表单验证
    //验证姓名
    $('input').eq(0).keyup(function () {
        let username = /^[\u4e00-\u9fa5]{2,6}$/;
        if ($(this).val().length > 16) {
            $(this).val($(this).val().substr(0, 16));
        }
        if (username.test($(this).val())) {
            $(this).siblings('span').text('输入正确').css('color', 'green');
            $(this).css("border-color", "green");
            compellation = true;
            return;
        } else {
            $(this).siblings('span').text('输入错误').css('color', 'red');
            $(this).css("border-color", "red");
            compellation = false;
            return;
        }
    }) //账户名验证结束

    // 验证用户名
    $('input').eq(1).keyup(function () {
        let username = /^[a-zA-z]\w{3,16}$/;
        if ($(this).val().length > 16) {
            $(this).val($(this).val().substr(0, 16));
        }
        if (username.test($(this).val())) {
            $(this).siblings('span').text('输入正确').css('color', 'green');
            $(this).css("border-color", "green");
            chname = true;
            return;
        } else {
            $(this).siblings('span').text('输入错误').css('color', 'red');
            $(this).css("border-color", "red");
            chname = false;
            return;
        }
    })
    // 密码验证
    $('input').eq(2).keyup(function () {
        let mm = /^[a-zA-Z0-9_-]{4,10}$/;
        if ($(this).val().length > 10) {
            $(this).val($(this).val().substr(0, 10));
        }
        if (mm.test($(this).val())) {
            $(this).siblings('span').text('输入正确').css('color', 'green');
            $(this).css("border-color", "green");
            chmm = true;
            return;
        } else {
            $(this).siblings('span').text('输入错误').css('color', 'red');
            $(this).css("border-color", "red");
            chmm = false;
            return;
        }
    }) //密码验证结束


    // 验证密码强度
    $('input').eq(2).on('change', function () {

        $('#strength i').animate({
            left: `${$(this).val().length*28}`
        }, 1000)

    })


    // 密码再次验证
    $('input').eq(3).keyup(function () {
        if ($(this).val() == $('input').eq(2).val()) {
            $(this).siblings('span').text('输入正确').css('color', 'green');
            $(this).css("border-color", "green");
            chmm1 = true;
        } else {
            $(this).siblings('span').text('输入错误').css('color', 'red');
            $(this).css("border-color", "red");
            chmm1 = false;
        }
    }) //密码再次验证结束

    //邮箱验证
    $('input').eq(4).keyup(function () {
        let mm = /^[0-9a-zA-Z_]{8,16}$/;
        if ($(this).val().length > 16) {
            $(this).val($(this).val().substr(0, 16));
        }
        if (mm.test($(this).val())) {
            $(this).siblings('span').text('输入正确').css('color', 'green');
            $(this).css("border-color", "green");
            email = true;
            return;
        } else {
            $(this).siblings('span').text('输入错误').css('color', 'red');
            $(this).css("border-color", "red");
            email = false;
            return;
        }
    })

    //手机号验证
    $('input').eq(5).keyup(function () {
        let phone = /^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}$|17[0-9]{9}$/;
        if ($(this).val().length > 11) {
            $(this).val($(this).val().substr(0, 11));
        }
        if (phone.test($(this).val())) {
            $(this).siblings('span').text('输入正确').css('color', 'green');
            $(this).css("border-color", "green");
            chphone = true;
            return;
        } else {
            $(this).siblings('span').text('输入错误').css('color', 'red');
            $(this).css("border-color", "red");
            chphone = false;
            return;
        }
    }) //手机号验证结束

    // 随机验证码验证
    $('input').eq(6).keyup(function () {
        if ($(this).val().length > 4) {
            $(this).val($(this).val().substr(0, 4));
        }
        if ($(this).val() == $('#btn').text()) {
            $(this).siblings('span').text('输入正确').css('color', 'green');
            $(this).css("border-color", "green");
            $('#yzm').attr({
                disabled: true
            });
            chyzm = true;
            return;
        } else {
            $(this).siblings('span').text('输入错误').css('color', 'red');
            $(this).css("border-color", "red");
            chyzm = false;
            return;
        }
    }); //随机验证码结束


    // 插件部分可以删除  小眼睛
    $('form div').eq(1).find('i').click(function () {
        $(this).toggleClass('bgi');
        // // 方法1
        // if ($(this).siblings('input').attr('type') == 'password') {
        //     $(this).siblings('input').attr({ type: 'text' });
        // } else {
        //     $(this).siblings('input').attr({ type: 'password' });
        // }
        // 方法2
        ($(this).siblings('input').attr('type') == 'password') ? $(this).siblings('input').attr({
            type: 'text'
        }): $(this).siblings('input').attr({
            type: 'password'
        })
    });


    //封装一个用于弹窗显示的函数

    function popUp(text) {
        $('#popUp').css('display', 'block').text(text);
        setTimeout(function () {
            $('#popUp').css('display', 'none')
        }, 2000)
    }


    $('#smt').click(function () {
        if (compellation == false) {
            // alert('账户不正确');
            popUp('姓名不符合要求')
            return false
        };
        if (chname == false) {
            popUp('账户不符合要求')
            return false
        };
        if (chmm == false) {
            // alert('密码不符合要求');
            popUp('密码不符合要求')
            return false
        };
        if (chmm1 == false) {
            // alert('两次密码不一样');
            popUp('两次密码不一样')
            return false
        };
        if (chphone == false) {
            // alert('手机号不正确');
            popUp('手机号不正确')
            return false
        };
        if (chyzm == false) {
            // alert('随机验证码输入错误');
            popUp('随机验证码输入错误')
            return false
        };
            // 先储存账号密码
            window.localStorage.setItem('zh', $('input').eq(5).val())
            window.localStorage.setItem('mm', $('input').eq(2).val())
            $('.smallBox').animate({
                left: -1400
            }, 500)
            $('.box ul li span').removeClass().eq(2).addClass('sildelispan')
            $('.yellowline').animate({
                left: 608
            }, 500,function(){
                setTimeout(function(){
                    $('form').submit()
                    window.location.href='log_in.html'
                },2000)
            });

    });





})